<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json数据请求</title>
	</head>
	<body>
		学院：<select id="s1">
			<option value="-1">请选择</option>
		</select>
		&nbsp; &nbsp;
		专业：<select id="s2" onchange="check()"></select>
		<hr >
		<b>所选专业：</b><span id="sp1" style="color: #00FFFF;"></span>


		<script>
			var xhr = new XMLHttpRequest();
			xhr.open("GET", "file/aim.json", false);
			xhr.send();
			if (xhr.status == 200) {
				var json = JSON.parse(xhr.responseText);
				var schools = [];
				for (var i = 0; i < json.length; i++) {
					schools[i] = json[i].school;
				}
				var majors = [];
				for (var i = 0; i < json.length; i++) {
					var major = [];
					for (var j = 0; j < json[i].major.length; j++) {
						major[j] = json[i].major[j];
					}
					majors[i] = major;
				}
				function createOption(obj, data) {
					if (data == null) {
					} else {
						for (var i = 0; i < data.length; i++) {
							var op = new Option(data[i],i);
							obj.options.add(op);
						}
					}
				}
				var school = document.getElementById("s1");
				createOption(school, schools);
				//选择对应的学院后，自动生成对应学院的下拉菜单
				var major = document.getElementById('s2'); //获取专业下拉菜单的元素对象
				school.onchange = function() { //为学院下拉菜单添加事件
					major.options.length = 0; //清空专业下的所有原有option
					if (school.value < 0) {
						createOption(major, null);
					} else {
						createOption(major, majors[school.value]);
					}
					check();
				}
			}
			function check(){
				var var1=document.getElementById("s1");
				var var2=document.getElementById("s2");
				 document.getElementById("sp1").innerHTML=var1.options[var1.selectedIndex].text+"-"+var2.options[var2.selectedIndex].text;
			}
		</script>
	</body>
</html>
